<script setup lang="ts">
import { reactive, ref } from "vue";
import {listAttByUser, listAttByUserOut} from "@/services/newsApi.ts";
import { FormInstance } from "@arco-design/web-vue";
import {download, downloadOut} from "@/utils";
const props = defineProps({
  registUid: String,
  show: Number,
  type: String,
  link: String
});

const attachList = reactive({
  patent: [],
  soft: [],
  contract: [],
  projectPPT: [],
  projectVideo: [],
  unit: [],
  finance: [],
  license: [],
  personnel: [],
  application: [],
  other: [],
});

const getDeclarationList = () => {
  if (props.link === "out") {
    listAttByUserOut({ registUid: props.registUid })
        .then((res) => {
          if (res.code === 200) {
            if (res.data) {
              attachList.patent = res.data.filter((item) => item.fileType === 1);
              attachList.soft = res.data.filter((item) => item.fileType === 2);
              attachList.contract = res.data.filter((item) => item.fileType === 3);
              attachList.projectPPT = res.data.filter(
                  (item) => item.fileType === 4
              );
              attachList.projectVideo = res.data.filter(
                  (item) => item.fileType === 5
              );
              attachList.unit = res.data.filter((item) => item.fileType === 6);
              attachList.finance = res.data.filter((item) => item.fileType === 7);
              attachList.license = res.data.filter((item) => item.fileType === 8);
              attachList.personnel = res.data.filter((item) => item.fileType === 9);
              attachList.application = res.data.filter(
                  (item) => item.fileType === 10
              );
              attachList.other = res.data.filter((item) => item.fileType === 11);
            }
          }
        })
        .finally(() => {
          setTimeout(() => {
            loading.value = false;
          }, 300);
        });
  } else {
    listAttByUser({ registUid: props.registUid })
        .then((res) => {
          if (res.code === 200) {
            if (res.data) {
              attachList.patent = res.data.filter((item) => item.fileType === 1);
              attachList.soft = res.data.filter((item) => item.fileType === 2);
              attachList.contract = res.data.filter((item) => item.fileType === 3);
              attachList.projectPPT = res.data.filter(
                  (item) => item.fileType === 4
              );
              attachList.projectVideo = res.data.filter(
                  (item) => item.fileType === 5
              );
              attachList.unit = res.data.filter((item) => item.fileType === 6);
              attachList.finance = res.data.filter((item) => item.fileType === 7);
              attachList.license = res.data.filter((item) => item.fileType === 8);
              attachList.personnel = res.data.filter((item) => item.fileType === 9);
              attachList.application = res.data.filter(
                  (item) => item.fileType === 10
              );
              attachList.other = res.data.filter((item) => item.fileType === 11);
            }
          }
        })
        .finally(() => {
          setTimeout(() => {
            loading.value = false;
          }, 300);
        });
  }

};

const formRef = ref<FormInstance>();

const loading = ref(false);

const options = reactive({
  title: "",
  type: 0,
});

const show = () => {
  loading.value = true;
  getDeclarationList();
  options.type = 0;
  formRef.value?.clearValidate();
};

// 附件下载
const handleLink = (row) => {
  if (props.link === "out") {
    downloadOut(row.filePath, row.fileName);
  } else {
    download(row.filePath, row.fileName);
  }

};

defineExpose({
  show,
});

const patentColumns = [
  {
    title: "专利名称",
    key: "name",
    dataIndex: "name",

    width: 150,
  },
  {
    title: "专利号",
    key: "no",
    dataIndex: "no",
    width: 150,
  },
  {
    title: "文件",
    key: "fileName",
    dataIndex: "fileName",
    slotName: "fileName",
    width: 150,
  },
  {
    title: "上传时间",
    key: "createTime",
    dataIndex: "createTime",
    width: 150,
  },
];

const sortColumns = [
  {
    title: "软著名称",
    key: "name",
    dataIndex: "name",
    width: 150,
  },
  {
    title: "登记号",
    key: "no",
    dataIndex: "no",
    width: 150,
  },
  {
    title: "文件",
    key: "fileName",
    dataIndex: "fileName",
    slotName: "fileName",
    width: 150,
  },
  {
    title: "上传时间",
    key: "createTime",
    dataIndex: "createTime",
    width: 150,
  },
];
const contractColumns = [
  {
    title: "文件",
    key: "fileName",
    dataIndex: "fileName",
    slotName: "fileName",
    width: 450,
  },
  {
    title: "上传时间",
    key: "createTime",
    dataIndex: "createTime",
    width: 150,
  },
];

const projectPPTColumns = [
  {
    title: "文件",
    key: "fileName",
    dataIndex: "fileName",
    slotName: "fileName",
    width: 300,
  },
  {
    title: "上传时间",
    key: "createTime",
    dataIndex: "createTime",
    width: 150,
  },
  {
    title: "是否最终",
    key: "isFinal",
    dataIndex: "isFinal",
    slotName: "isFinal",
    width: 150,
  },
];

const licenseColumns = [
  {
    title: "证明材料",
    key: "fileName",
    dataIndex: "fileName",
    slotName: "fileName",
    width: 450,
  },
  {
    title: "上传时间",
    key: "createTime",
    dataIndex: "createTime",
    width: 150,
  },
];
</script>

<template>
  <div>
    <div
      v-if="loading"
      style="height: 700px;"
    >
      <div class="loading-overlay">
        <div class="loading-spinner"></div>
        <!-- <div class="loading-text">加载中</div> -->
      </div>
    </div>

    <div
      style="height:700px;overflow: auto;"
      v-else
    >
      <div v-if="attachList.patent.length !== 0">
        <p class="label">专利数量：{{attachList.patent.length}}个</p>
        <a-table
          bordered
          :pagination="false"
          :columns="patentColumns"
          :data="attachList.patent"
          size="small"
        >
          <template #fileName="{record}">
            <span
              @click="handleLink(record)"
              class="file"
            >{{ record.fileName }}</span>
          </template>
        </a-table>
      </div>

      <div v-if="attachList.soft.length !== 0">
        <p class="label">软著数量：{{attachList.soft.length}}个</p>
        <a-table
          bordered
          :pagination="false"
          :columns="sortColumns"
          :data="attachList.soft"
          size="small"
        >
          <template #fileName="{record}">
            <span
              @click="handleLink(record)"
              class="file"
            >{{ record.fileName }}</span>
          </template>
        </a-table>
      </div>

      <div v-if="attachList.contract.length !== 0">
        <p class="label">合同情况</p>
        <a-table
          bordered
          :pagination="false"
          :columns="contractColumns"
          :data="attachList.contract"
          size="small"
        >
          <template #fileName="{record}">
            <span
              @click="handleLink(record)"
              class="file"
            >{{ record.fileName }}</span>
          </template>
        </a-table>
      </div>

      <div v-if="attachList.projectPPT.length !== 0">
        <p class="label">项目介绍PPT</p>
        <a-table
          bordered
          :pagination="false"
          :columns="projectPPTColumns"
          :data="attachList.projectPPT"
          size="small"
        >
          <template #fileName="{record}">
            <span
              @click="handleLink(record)"
              class="file"
            >{{ record.fileName }}</span>
          </template>
          <template #isFinal="{record}">
            <span>{{ record.isFinal === 0 ? '否' : '是' }}</span>
          </template>
        </a-table>
      </div>

      <div v-if="attachList.projectVideo.length !== 0">
        <p class="label">项目介绍视频</p>
        <a-table
          bordered
          :pagination="false"
          :columns="projectPPTColumns"
          :data="attachList.projectVideo"
          size="small"
        >
          <template #fileName="{record}">
            <span
              @click="handleLink(record)"
              class="file"
            >{{ record.fileName }}</span>
          </template>
          <template #isFinal="{record}">
            <span>{{ record.isFinal === 0 ? '否' : '是' }}</span>
          </template>
        </a-table>
      </div>

      <div v-if="attachList.unit.length !== 0">
        <p class="label">单位授权书</p>
        <a-table
          bordered
          :pagination="false"
          :columns="contractColumns"
          :data="attachList.unit"
          size="small"
        >
          <template #fileName="{record}">
            <span
              @click="handleLink(record)"
              class="file"
            >{{ record.fileName }}</span>
          </template>
        </a-table>
      </div>

      <div v-if="attachList.finance.length !== 0">
        <p class="label">上年度财务审计报告</p>
        <a-table
          bordered
          :pagination="false"
          :columns="contractColumns"
          :data="attachList.finance"
          size="small"
        >
          <template #fileName="{record}">
            <span
              @click="handleLink(record)"
              class="file"
            >{{ record.fileName }}</span>
          </template>
        </a-table>
      </div>

      <div v-if="attachList.license.length !== 0">
        <p class="label">基本资质证明-营业执照</p>
        <a-table
          bordered
          :pagination="false"
          :columns="licenseColumns"
          :data="attachList.license"
          size="small"
        >
          <template #fileName="{record}">
            <span
              @click="handleLink(record)"
              class="file"
            >{{ record.fileName }}</span>
          </template>
        </a-table>

      </div>

      <div v-if="attachList.personnel.length !== 0">
        <p class="label">基本资质证明-人员社保</p>
        <a-table
            bordered
            :pagination="false"
            :columns="licenseColumns"
            :data="attachList.personnel"
            size="small"
        >
          <template #fileName="{record}">
            <span
                @click="handleLink(record)"
                class="file"
            >{{ record.fileName }}</span>
          </template>
        </a-table>
      </div>

      <div v-if="attachList.application.length !== 0">
        <p class="label">应用推广证明</p>
        <a-table
          bordered
          :pagination="false"
          :columns="contractColumns"
          :data="attachList.application"
          size="small"
        >
          <template #fileName="{record}">
            <span
              @click="handleLink(record)"
              class="file"
            >{{ record.fileName }}</span>
          </template>
        </a-table>
      </div>

      <div v-if="attachList.other.length !== 0">
        <p class="label">其他证明材料（复印件）</p>
        <a-table
          bordered
          :pagination="false"
          :columns="contractColumns"
          :data="attachList.other"
          size="small"
        >
          <template #fileName="{record}">
            <span
              @click="handleLink(record)"
              class="file"
            >{{ record.fileName }}</span>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.label {
  margin-top: 10px;
  font-size: 15px;
}
.file {
  color: #0077ff;
  cursor: pointer;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.loading-text {
  font-size: 13px;
  color: #333;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
